<template>
  <div>
    <el-card>
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>会员管理</el-breadcrumb-item>
        <el-breadcrumb-item>会员等级管理</el-breadcrumb-item>
      </el-breadcrumb>
      <h3>配置会员等级</h3>
    </el-card>
    <el-card>
      <el-row>
        <el-col :span="14">
          <el-row>
            <el-col :span="5">
              <div class="ju-li">等级</div>
            </el-col>
            <el-col :span="10">
              <el-input
                class="djmc"
                v-model="input14"
                placeholder="请输入内容"
              ></el-input>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="5">
              <div class="ju-li">等级名称:</div>
            </el-col>
            <el-col :span="10">
              <el-input
                class="djmc"
                v-model="input1"
                placeholder="请输入内容"
              ></el-input>
            </el-col>
          </el-row>
          <el-row class="shangxia">
            <el-col class="ju-li" :span="4"> 背景色: </el-col>
            <el-col :span="10">
              <el-select v-model="form.region" placeholder="请选择活动区域">
                <el-option label="颜色1" value="shanghai"></el-option>
                <el-option label="颜色2" value="beijing"></el-option>
              </el-select>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="5">
              <div class="ju-li">升级礼包</div>
            </el-col>
            <el-col :span="10">
              <el-input
                class="djmc"
                v-model="input11"
                placeholder="请输入内容"
              ></el-input>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="5">
              <div class="ju-li">等级状态</div>
            </el-col>
            <el-col :span="10">
              <el-tooltip :content="'Switch value: ' + value" placement="top">
                <el-switch
                  v-model="value"
                  active-color="#13ce66"
                  inactive-color="#ff4949"
                  active-value="100"
                  inactive-value="0"
                >
                </el-switch>
              </el-tooltip>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="5">
              <div class="ju-li">成长值</div>
            </el-col>
            <el-col :span="10">
              <el-input
                class="djmc"
                v-model="input12"
                placeholder="请输入内容"
              ></el-input>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="5">
              <div class="ju-li">等级权益</div>
            </el-col>
            <el-col :span="10">
              <el-input
                class="djmc"
                v-model="input13"
                placeholder="请输入内容"
              ></el-input>
            </el-col>
          </el-row>

          <!-- <el-row>
            <el-col :span="5">
              <div class="ju-li">修改时间</div>
            </el-col>
            <el-col :span="10">
              <el-input
                class="djmc"
                v-model="input13"
                placeholder="请输入内容"
              ></el-input>
            </el-col> -->
          <!-- </el-row> -->
          <!-- <el-row class="shangxia">
            <el-col class="ju-li" :span="3">升级条件</el-col>
            <el-col :span="9">
              <el-checkbox class="tj" v-model="checked"
                >注册会员</el-checkbox
              ></el-col
            >
          </el-row> -->
          <!-- <el-row class="shangxia">
            <el-col :span="3" :offset="4">
              <el-checkbox class="tj" v-model="a"
                >累计消费</el-checkbox
              ></el-col
            >
            <el-col :span="7">
              <el-input
                class="inpu"
                v-model="input2"
                placeholder="请输入内容"
              ></el-input>
            </el-col>
            <el-col :span="3"><el-button size="medium">元</el-button></el-col>
          </el-row>
          <el-row class="shangxia">
            <el-col :span="3" :offset="4">
              <el-checkbox class="tj" v-model="ab"
                >成长值</el-checkbox
              ></el-col
            >
            <el-col :span="7">
              <el-input
                class="inpu"
                v-model="input3"
                placeholder="请输入内容"
              ></el-input>
            </el-col>
          </el-row> -->
          <el-row class="shangxia1">
            <el-col class="ju-li" :span="3">会员权益</el-col>
            <el-col :span="3">
              <el-checkbox class="tj" v-model="abc"
                >成长加速</el-checkbox
              ></el-col
            >
          </el-row>
          <el-row>
            <el-col :span="3" :offset="4">
              <el-checkbox class="tj" v-model="abcd"
                >商品折扣</el-checkbox
              ></el-col
            >
          </el-row>
          <!-- <el-row>
            <el-col :span="3" :offset="4">
              <el-checkbox class="tj mcn" v-model="abcde"
                >积分翻倍</el-checkbox
              ></el-col
            >
          </el-row> -->
          <el-row>
            <el-col :span="4" :offset="4">
              <el-link type="primary" :underline="false"
                >配置会员权益</el-link
              ></el-col
            >
          </el-row>
          <el-row class="shangxia1">
            <el-col class="ju-li" :span="2">开礼包</el-col>
            <el-col :span="4">
              <el-checkbox class="tj" v-model="abcdef"
                >送优惠劵</el-checkbox
              ></el-col
            >
            <el-col :span="3">
              <el-link type="primary" :underline="false">选择优惠劵</el-link>
            </el-col>
          </el-row>
          <el-row>
            <!-- <el-col :span="2" :offset="4">
              <el-checkbox class="tj" v-model="abcdefg">送积分</el-checkbox>
            </el-col> -->
            <!-- <el-col :span="3">
              <el-input
                class="inpu"
                v-model="input4"
                placeholder="请输入内容"
              ></el-input
            ></el-col> -->
          </el-row>
          <el-row class="juli">
            <el-col :span="3" :offset="4">
              <el-button type="primary" @click="tijiao">提交</el-button>
            </el-col>
            <el-col :span="3">
              <el-button @click="fanhui"> 返回</el-button>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="10">
          <div class="bunt">
            <el-row>
              <el-col>会员名称</el-col>
              <el-col>
                <el-row>
                  <el-col> <span class="zhiti-dx">560</span> /1000</el-col>
                  <el-col><el-progress :percentage="5"></el-progress></el-col>
                  <el-col>成长值 距离升级还有500成长值</el-col>
                </el-row>
              </el-col>
            </el-row>
          </div>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>
<script>
export default {
  data() {
    return {
      value: "100",
      percentage: "",
      checked: true,
      // a: "",
      // ab:"",
      abc: "",
      abc: "",
      abcd: "",
      abcde: "",
      abcdef: "",
      // abcdefg: "",
      input2: "",
      input1: "",
      input3: "",
      input4: "",
      input5: "",
      input11: "",
      input12: "",
      input13: "",
      input14: "",
      form: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
      },
    };
  },
  methods: {
    fanhui() {
      this.$router.push("/home/UserLevel");
    },
    tijiao() {
      this.$axios({
        url: "/vip/userLevel/add",
        method: "post",
        data: {
          level: this.input14,
          name: this.input1,
          packages: this.input11,
          status: this.value,
          created: this.input13,
        },
      }).then((res) => {
        console.log(res);
        this.$message.success("提交成功");
        this.inputwoko();
        this.$router.push("/home/UserLevel");
      });
    },
    inputwoko() {
      (this.input2 = ""),
        (this.input1 = ""),
        (this.input3 = ""),
        (this.input4 = ""),
        (this.input5 = ""),
        (this.input11 = ""),
        (this.input12 = ""),
        (this.input13 = ""),
        (this.input14 = "");
    },
  },
};
</script>
 <style lang="less" scoped>
.juli {
  margin-top: 30px;
}
.tj {
  margin-top: 10px;
}
.mcn {
  margin-block: 10px;
}
.ti1 {
  margin-left: 300px;
}
.ju-li {
  margin-left: 60px;
  line-height: 45px;
}

.shangxia {
  margin-top: 10px;
}
.djmc {
  width: 300px;
}
.hueyan {
  margin: 10px;
}
.zhiti-dx {
  font-size: 25px;
}
.bunt {
  width: 350px;
  height: 200px;
  background: rgb(9, 201, 25);
  border-radius: 20px;
  margin-left: 100px;
  color: #fff;
  > .el-row > .el-col:first-child {
    margin: 30px 20px;
  }
  > .el-row > .el-col:last-child {
    margin-top: 25px;
    margin-left: 20px;
  }
}
</style>
